<template>
	<view>
		<template v-if="current === 0">
			<view class="d-p-l-30 d-p-r-30" style="padding-left: 30rpx;padding-right: 30rpx;">
				<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top flex-column" style="margin-top: 20rpx;padding: 20rpx;">
					<!-- <view class="d-font-34 d-white">
						外馆游泳票
					</view> -->
					<view class="d-flex">
						<image :src="itemarr.ticket_picture" mode="" style="width: 160rpx;height: 160rpx;"></image>
						<view class="d-m-l-20 d-flex-1" style="margin-left: 20rpx;">
							<view class="d-m-t-60 d-font-30 d-red" style="margin-top: 60rpx;font-size: 30rpx;">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{itemarr.amount}}</text>
							</view>
							<view class="d-font-30 u-line-1 d-white" style="font-size: 30rpx;">票名：{{itemarr.ticket_name}}</view>
							<view class="d-font-30 u-line-1 d-xuxian" style="font-size: 30rpx;"></view>
							<view class="d-font-30 u-line-1 d-white" style="font-size: 30rpx;">场馆：{{itemarr.venue_name}}</view>
							<!-- <view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view>
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->

						</view>
					</view>

				</view>
				
				<view class="qline">
					<view class="l1"></view>
					<view class="l1 l2"></view>
				</view>
				<view class="d-p-t-60"  style="padding-top: 60rpx;">
					<view class="d-qrd">
						<view class="qcard">
							<view class="q1"></view>
							<view class="q1 q2"></view>
						</view>
						<view class="d-text-center d-p-t-60 d-main" style="padding-top: 60rpx;">使用时请出示此二维码</view>
						<view class="d-flex d-row-center d-m-t-15" style="margin-top: 15rpx;" v-if="itemarr.qr_code_show== true">
							<!-- <u-image :src="$demo" width="370rpx" height="370rpx"></u-image> -->
							<uQRCode ref="qrcode" canvas-id="qrcode" :value="qr_code" size="185"></uQRCode>
						</view>
						<view class="d-flex d-row-center d-m-t-15" style="margin-top: 15rpx;" v-if="itemarr.qr_code_show== false">
							暂不显示
						</view>
						<view class="d-main d-font-32 d-text-center d-m-t-30" style="font-size: 32rpx;margin-top: 30rpx;">{{ itemarr.qr_code }}</view>
						<view class="d-text-center d-99 d-font-22" style="font-size: 22rpx;">为保障用户权益，二维码1分钟刷新一次，请尽快展示核销</view>
					</view>
				</view>
			</view>
		</template>
		<customer-Kefu ></customer-Kefu>
	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
	const index = require("@/api/index/index.js");
	export default {
		components: {
			uQRCode
		},
		data() {
			return {
				current: 0,
				id:'',
				itemarr:{},
				qr_code:""
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getTicketList()
		},
		methods: {
			async getTicketList() {
				let postData = {
					ids: this.id,
				};
				let res = await index.bill_ticket_view(postData);
				if (res.code === 1) {
					console.log(res, '222')
					this.itemarr = res.data
					this.qr_code = res.data.qr_code
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(6, 164, 255);
		border-radius: 10rpx;
	}

	.d-list-box1 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(48, 182, 134);
		border-radius: 10rpx;
	}

	.d-list-box2 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(253, 168, 92);
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 62vw;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}
	
	.qline {
		position: relative;
		.l1 {
			width: 20rpx;
			height: 60rpx;
			background: #dce0fd;
			border-radius: 10rpx;
			position: absolute;
			left: 130rpx;
			bottom: -60rpx;
		}
		.l2 {
			left: auto;
			right: 130rpx;
		}
	}
	
	.d-qrd {
		width: 626rpx;
		min-height: 660rpx;
		background: #ffffff;
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		border-radius: 10rpx;
		margin: -22rpx auto 0;
	}
	
	.qcard {
		position: relative;
		.q1 {
			width: 22rpx;
			height: 22rpx;
			background: #ffffff;
			border: 4rpx solid #575c86;
			border-radius: 50%;
			box-sizing: border-box;
			position: absolute;
			left: 99rpx;
		}
		.q2 {
			left: auto;
			right: 99rpx;
		}
	}
	.d-main {
		color: #59a0ff;
	}
	.d-99 {
		color: #999;
	}
	
	.d-filter {
		filter: grayscale(100%);
	}
</style>